<template>
	<view class="oinfo">
		<view class="oinfo-header" @click="hanldChoseAddress()">
			<image src="/static/img/address_din.png" class="add-img"></image>
			<view class="oinfo-cent" v-if="recyclyAddressInfo.address">
				<view class="oinfo-add">{{recyclyAddressInfo.address}}</view>
				<view class="oinfo-name">{{recyclyAddressInfo.name}} {{recyclyAddressInfo.mobile}}</view>
			</view>
			<view class="oinfo-cent" v-else>
				<view style="font-size: 16px;font-weight: bold;">添加收货地址</view>
			</view>
			
			<image src="/static/img/right_lan.png" class="add-img2"></image>
		</view>
		<view class="oshop-body">
			<view class="oshop">
				<image :src="detail.img" class="oshop-img"></image>
				<view class="oshop-text">
					<view style="padding-bottom: 12px;color: rgba(0, 0, 0, 1);font-size: 15px;font-weight: bold;">{{detail.shortitle}}</view>
					<view style="color: rgba(134, 134, 134, 1);padding-bottom: 4px;">数量：x{{number}}</view>
					<view style="color: rgba(134, 134, 134, 1);">价格 ：{{detail.intergral}} </view>
				</view>
			</view>
			<view class="pirce-right">
				<image src="/static/img/sjian.png" @click="reduce" class="right-img"></image>
				<text style="color: #21252A;font-weight: bold;padding: 0 10px;">{{number}}</text>
				<image src="/static/img/sjia.png" @click="addGoods" class="right-img">
			</view>
		</view>
		<view class="sub-wrapper">
			<view class="sub-money">
				<view class="mon-title">商品总价：</view>
				<view class="mon-num">≈{{total || 0}}</view>
			</view>
			<view class="sub-eit">
				<view class="eit-title">留言备注：</view>
				<view class="eit-text">
					<textarea type="text" placeholder="请输入留言" v-model="info" class="iphone-tar" />
				</view>
			</view>
		</view>
		<view class="oshop-type">支付方式</view>
		<view class="oshop-pl">
			<view class="sub-money">
				<view class="mon-title">可用积分：{{userinfo.integral || 0}}</view>
				<view class="mon-num">								
				  <radio id="1" value="ww" :checked="current" style="transform:scale(0.8)" :color="color" @click="radioChange"></radio>
				 </view>
			</view>
		</view>
		
		<view class="submit">
			<view class="submit-wrapper">
				<view>合计：<text style="color: #3E9AFC;font-size: 18px;font-weight: bold;">{{total || 0}}</text>
					<text style="font-size: 12px;color: #3E9AFC;">（积分）</text>
				</view>
				<view class="goods-btn" @click="hanldSubmit()">
					提交订单
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				number: 1,
				color:'#3E9AFC',
				current:true,
				detail:{},
				intergral:'',
				userinfo:{},
				info:'',
				recyclyAddressInfo:{}
			}
		},
		computed:{
			total(){
				return (this.number * parseFloat(this.detail.intergral)).toFixed(2) || 0;
			}
		},
		onLoad(options){
			let data = decodeURIComponent(options.data)
			console.log(data)
			if(data){
				this.detail = JSON.parse(data)
				console.log(this.detail)
				this.number = this.detail.num
			}
			this.getInfo()
			this.getAddressList();
		},
		onShow() {
			this.getAddressList();
		},
		methods: {
			//获取默认回收地址
			getAddressList() {
				this.$http.address().then((res) => {
					console.log(res)
					if (res.code == 0) {
						if(res.data && res.data.length>0){
							res.data.forEach((val) => {
								if(val.id == getApp().globalData.address_id){
									this.recyclyAddressInfo = val
								}else if(val.is_default == 2){
									this.recyclyAddressInfo = val
								}
							})
						}
						console.log(this.recyclyAddressInfo)
					}
				})
			},
			getInfo(){
				this.$http.info().then(res => {
					console.log(res)
					this.userinfo = res.data
				})
			},
			//减商品
			reduce(){
				if(this.number>1){
					this.number -= 1
				}
			},
			//加商品
			addGoods(){
				if(this.number < (this.detail.sku)){
					this.number += 1
				}
			},
			hanldChoseAddress(){
				uni.navigateTo({
					url:'/pages/member/addressList'
				})
			},
			radioChange(evt){
				this.current = true
			},
			hanldSubmit(){
				const formData = {
					addressid: this.recyclyAddressInfo.id,
					goodsid: this.detail.id,
					num: this.number,
					info: this.info,
				};
				this.$http.add_order(formData).then(res => {
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					if(res.code == 0){
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/member/mallOrder/index'
							})
						},800)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.oinfo {
		width: 100%;
		background-color: rgba(246, 246, 246, 1);
	}

	.oinfo-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 15px 25px;
		background-color: rgba(246, 246, 246, 1);
	}

	.oinfo-cent {
		flex: 1;
		margin-left: 20px;
	}

	.add-img {
		width: 25px;
		height: 27px;
	}

	.add-img2 {
		width: 7px;
		height: 12px;
	}

	.oinfo-add {
		color: rgba(52, 54, 51, 1);
		font-size: 15px;
		font-weight: bold;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		width: 500upx;

	}

	.oinfo-name {
		color: rgba(120, 120, 120, 1);
		font-size: 15px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.eit-text{
		width: 510upx;
	}
.oshop-body{
	background-color: #fff;
	margin-bottom: 2px;
	padding: 20px 23px ;
}
	.oshop {
		display: flex;
		flex-direction: row;
	}

	.oshop-img {
		width: 84px;
		height: 84px;
		border-radius: 10px;
	}

	.oshop-text {
		padding-left: 20px;
	}

	.pirce-right {
		display: flex;
		flex-direction: row;
		align-items: center;
		    justify-content: flex-end;
	}
	.eit-text{
		width: 510upx;
	}

	.right-img {
		width: 23px;
		height: 23px;
	}
	.sub-wrapper{
		background-color: #FFFFFF;
		
	}
	.sub-money{
		padding: 17px 23px;
		border-bottom: 2px solid rgba(246, 246, 246, 1);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.mon-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
	}
	.mon-num{
		color: #3E9AFC;
		font-size: 18px;
		font-weight: bold;
	}
	.sub-eit{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 15px 23px 48px 23px;
	}
	.eit-title{
		color: rgba(36, 36, 36, 1);
		font-size: 14px;
		font-weight: bold;
		min-width: 80px;
	}
	.sub-info{
		background-color: #fff;
		margin-top: 10px;
		padding: 15px 20px;
	}
	.sub-but{
		width: 100%;
		height:108upx;
		
background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);

box-shadow: 0px 2px 4px 0px #1E75FF;
		position: fixed;
		bottom: 0;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		line-height: 108upx;
		color: #FFFFFF;
	}
	.oshop-type{
		color: rgba(120, 120, 120, 1);
		padding: 13px 20px;
	}
	.oshop-pl{
		background-color: #FFFFFF;
	}
	
	.submit {
	
		font-size: 15px;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}
	.submit-wrapper{
		padding: 12px 4%;
		display: flex;
		justify-content: space-between;
		background: #fff;
		align-items: center;
	}
	
	.mall-mian {
		color: rgba(174, 174, 174, 1);
		text-decoration: line-through;
	}
	
	.now {
		display: flex;
		font-size: 18px;
		color: #3E9AFC;
		font-weight: bold;
		margin-right: 6px;
		align-items: center;
	}
	
	.goods-main {
		color: rgba(134, 134, 134, 1);
	}
	
	.num {
		position: absolute;
		right: 20px;
		bottom: 50px;
		color: rgba(134, 134, 134, 1);
	}
	
	.right-img {
		width: 23px;
		height: 23px;
	}
	
	.pirce-right {
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	
	.pirce {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.goods-btn {
		width: 200upx;
		height: 60upx;
	
	background: linear-gradient(124deg, #6AA7E8 0%, #3D9AFD 100%);
	
box-shadow: 0px 2px 4px 0px #1E75FF;
		border-radius: 10upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 60upx;
	}
	.iphone-tar{
		height:20px;
		width: 100%;
		font-size: 13px;
	}
</style>
